<template>
  <vp-dialog :span="4" ref="editDialogRef" class="drawer">
    <template #title ><vp-label zh="维护奖励情况" en="Edit Reward"/></template >
    <el-form
      label-suffix=":"
      v-loading="loading"
      
      :model="formData"
      :rules="type == 'add' || type == 'edit'  ? formRules : ''"
      ref="formRef"
      label-width="120px"
    >
        <vp-card>
          <template #header>
              <vp-label zh="报告信息" en="Report Information"/>
            </template>
          <el-row>
            <vp-col :span="4" >
                <el-form-item prop="bh">
                  <template #label><vp-label zh="报告编号" en="Report No."/></template>
                  <sapn >{{ formData.bh }}</sapn>
                </el-form-item>
            </vp-col>
            <vp-col :span="4">
              <el-form-item prop="bgrq">
                <template #label><vp-label zh="报告日期" en="Report Date"/></template>
                <span >{{ formData.bgrq }}</span>
              </el-form-item>
            </vp-col>
          <vp-col :span="4" >
            <el-form-item el-form-item prop="bgr">
              <template #label><vp-label zh="报告人" en="Reporter"/></template>
                  <div v-if="formData.nmbs == 1">
                    <span>{{ "************" }}</span>
                    <AnonymousContentViewer 
                      v-if="auths(['voluntaryList.showanonymous', 'reportList.showanonymous'])"
                      :username="formData.bgr" 
                      :departmentName="formData.bgbm" 
                    />
                  </div>
                  <div v-else>{{ formData.bgr }}</div>
            </el-form-item>
          </vp-col>
          <vp-col :span="4" >
            <el-form-item el-form-item prop="bgbm">
              <template #label><vp-label zh="部门" en="Department"/></template>
                  <span  >{{formData.nmbs == 0 ? formData.bgbm  : "************" }}</span>
            </el-form-item>
          </vp-col>
        </el-row>
        <el-row>
            <vp-col :span="1">
              <el-form-item prop="bgnr" >
                <template #label><vp-label zh="报告内容" en="Reprot Content"/></template>
                    <span   >{{ formData.bgnr }}</span>
              </el-form-item>
            </vp-col>
        </el-row>
        <el-row>
          <vp-col :span="4" >
            <el-form-item prop="jlje">
              <template #label><vp-label zh="奖励金额" en="Reward Amount"/></template>
                  <el-input
                    v-model="formData.jlje"
                    @blur="formData.jlje = $event.target.value.trim()"
                    maxlength="10"
                  >
                  <template #append>元 CNY</template>
                  </el-input>
            </el-form-item>
          </vp-col>
        </el-row>
        <el-row>
          <vp-col :span="1" >
            <el-form-item prop="jlqk" >
              <template #label><vp-label zh="奖励情况" en="Reward Status"/></template>
                <el-input
                    v-model="formData.jlqk"
                    :autosize="{ minRows: 4}"
                    type="textarea"
                    maxlength="1300"
                  ></el-input>
            </el-form-item>
          </vp-col>
        </el-row>
      </vp-card>
    </el-form>
    <template #footer>
      <vp-btn-confirm :loading="saveLoading" @click="handleSave"/>
  </template>
  </vp-dialog> 
  <UserDialog ref="userDialogRef"></UserDialog>
</template> 
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import request from "/@/utils/request";
import validateUtils from "/@/utils/validateUtils";
import FileListCard from '/@/components/vp/file/VpFileListCard.vue';
import UserDialog from '/@/components/vp/user/VpUserDialog.vue';
import { i18n } from "/@/i18n";
import AnonymousContentViewer from "../component/AnonymousContentViewer.vue";
import {auths} from '/@/utils/authFunction';

export default defineComponent({
  name: "editReward",
  components: {
    FileListCard,
    UserDialog,
    AnonymousContentViewer,
  },
  emits: ["formSubmited"],
  setup(props, context) {
    const state = reactive({
      type: "add",
      loading: false,
      saveLoading: false,
      termInputType: 1,
      formData: {
        id: "",
        lx: null,
        jb: null,
        bh: "",
        bgrq: "",
        nmbs: 1,
        bgrid: "",
        bgr: "",
        bgbmid: "",
        bgbm: "",
        bgnr: "",
        jlje: null,
        jlqk: "",
      },
      formRules: {
        jlje: [validateUtils.notNull, validateUtils.num2],
      },
    });

    const initFormData = () => {
      state.formData = {
          id: "",
          lx: null,
          jb: null,
          bh: "",
          bgrq: "",
          nmbs: 1,
          bgrid: "",
          bgr: "",
          bgbmid: "",
          bgbm: "",
          bgnr: "",
          jlje: null,
          jlqk: "",
      };
    };

    const editDialogRef = ref();
    const formRef = ref();
    const router = useRouter();
    const { t } = useI18n();

    const handleOpen = (id: string) => {
      initFormData();
        state.loading = true;
        request.get(`/voluntary/dept/${id}`).then((res) => {
          state.formData = {
            ...state.formData,
            ...res.data,
          };
          state.loading = false;
          
        });
        editDialogRef.value.handleOpen();
    };


    const getData = (zt : number): Promise<any>=>{
      let promise = new Promise((resolve, reject) => {
          if(zt == 10){
            resolve({
                  ...state.formData
              });
              return;
          }else{
            formRef.value.validate((valid: boolean) => {
              if (valid) {
                  resolve({
                      ...state.formData
                  });
              } else {
                  reject();
              }
            }) 
          }
      })
      return promise; 
    }

    const handleSave = () => {
      formRef.value.validate((valid: boolean)=>{
          if(valid){
            request.post("/voluntary/dept/saveReward", {
                  ...state.formData,
              }).then(() => {
                  context.emit("formSubmited");
                  editDialogRef.value.handleClose();
              }).finally(()=>{
                  state.saveLoading = false;
              })
          }else{
            state.saveLoading = false;
          }
      })
    }  

    return {
      ...toRefs(state),
      ...toRefs(props),
      editDialogRef,
      formRef,
      handleOpen,
      getData,
      handleSave,
      auths,
    };
  },
});
</script>

<style lang="scss" scoped>
.drawer {
  :deep(.el-checkbox__label) {
    min-width: 80px;
  }
}
.el-space {
  margin-top: 0px;
}
:deep(.el-space__item) {
    padding-bottom: 0px !important;
     margin-right: 0px !important;
}
:deep(.el-divider--horizontal){
    display: block;
    height: 1px;
    width: 100%;
    margin: 0;
    border-top: 1px var(--el-border-color) var(--el-border-style);
}
:deep(.ycds-class .el-form-item__label) {
  width: 200px !important;
}
</style>
